<!-- Modal -->
<div
  class="modal fade modal-default"
  id="dlg-bookmark"
  tabindex="-1"
  role="dialog"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3>Add Bookmark</h3>
      </div>
      <div class="modal-body">
        <section class="">
          <form
            ng-class="{'submitted': submitted}"
            ng-submit="$ctrl.addBookmark()"
          >
            <div class="row">
              <section class="col-lg-12">
                <div class="card mb-4">
                  <h6 class="card-header">Bookmarks</h6>
                  <div class="card-body">
                    <div class="row">
                      <input
                        type="text"
                        class="form-control mb-4"
                        placeholder="Enter text to filter"
                        ng-model="$ctrl.searchText"
                      />
                    </div>

                    <div
                      class="row"
                      ng-repeat="nav in $ctrl.bookmarks | filter:$ctrl.searchText"
                    >
                      <div class="col-4">
                        <span ng-bind="nav.title"></span>
                      </div>
                      <div class="col-5">
                        <span ng-bind="nav.url"></span>
                      </div>
                      <div class="col-3 text-end">
                        <a
                          ng-click="$ctrl.removeBookmark(nav.url)"
                          class="btn btn-link text-primary"
                        >
                          <span class="fas fa-trash-alt"></span>
                        </a>
                        <a
                          ng-click="$ctrl.goToPath(nav.url)"
                          class="btn btn-link text-primary"
                        >
                          <span class="fas fa-link"></span>
                        </a>
                      </div>
                    </div>
                    <div class="col-6">
                      Title:
                      <input
                        type="text"
                        class="form-control mb-4"
                        onfocus="this.select()"
                        placeholder="Enter new Title"
                        ng-model="$ctrl.model.title"
                      />
                    </div>
                    <div class="col-6">
                      Url:
                      <input
                        type="text"
                        class="form-control mb-4"
                        placeholder="Enter new Url"
                        ng-model="$ctrl.model.url"
                      />
                    </div>
                  </div>
                </div>
              </section>
            </div>

            <div class="row">
              <div class="col-lg-12">
                <button
                  type="button"
                  ng-click="$ctrl.getCurrentUrl()"
                  class="btn btn-info"
                >
                  Load
                </button>
                <button type="submit" class="btn btn-success">Save</button>
                <button
                  type="button"
                  class="btn btn-default"
                  data-bs-dismiss="modal"
                >
                  Close
                </button>
              </div>
            </div>
          </form>
        </section>
      </div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>
